.box{
    height: 100%;
    width: 100%;
    .main{
        height: 100%;
        width: 100%;
        flex: 1;
        overflow-y: scroll;
        overflow-x: hidden;
        // 轮播图
        .swiper{
            height: 200px;
            width: 100%;
            position: relative;
            .swiper-wrapper{
                .swiper-slide{
                    img{
                        height: 100%;
                        width: 100%;
                    }
                }
            }
            .swiper-pagination{
            position: absolute;
            top: 85%;
            }
        }
        // 排名，打卡
        .today{
            height: 150px;
            padding: 0 20px 0 20px;
            margin-top: 20px;
            .ranking{
                height: 150px;
                width: 150px;
                border-radius: 15px 15px 15px 15px;
                background-color: rgba(21, 146, 204, 1);
                position: relative;
                .p_com2{
                    color: rgba(0, 78, 115, 1);
                    font-size: 18px;
                    padding: 14px;
                    position: absolute;
                    font-weight: bold;
                }
                .p_9{
                    color: white;
                    font-size: 60px;
                    font-weight: bold;
                    position: absolute;
                    right: 10px;
                    top: 50px;
                }
                img{
                   height: 100px;
                   width: 100px;
                   position: absolute;
                   left: 0;
                   top:30px;
                }
            }
            .clock{
                height: 150px;
                width: 200px;
                border-radius: 15px 15px 15px 15px;
                background-color: rgba(123, 203, 245, 1);
                position: relative;
                .p_com2{
                    color: rgba(0, 81, 119, 1);
                    font-size: 18px;
                    padding: 14px;
                }
                img{
                    height: 100px;
                    width: 100px;
                    position: absolute;
                    top: 30px;
                    left: 10px;
                 }
                 .clock_bt{
                    width: 130px;
                    height: 40px;
                    background: rgba(255, 255, 255, 0);
                    line-height: 23px;
                    border-radius: 20px;
                    border: 3px solid rgba(0, 81, 119, 1);
                    position: absolute;
                    right: 10px;
                    top:80px;
                 }
                 .clocked{
                    width: 130px;
                    height: 40px;
                    background: rgba(110, 109, 109, 0.514);
                    line-height: 23px;
                    border-radius: 20px;
                    border: 3px solid white;
                    position: absolute;
                    right: 10px;
                    top:80px;
                    color: white;
                 }
            }
        }
        // 数据，徽章
        .box2{
            height: 110px;
            padding: 0 20px 0 20px;
            margin-top: 20px;
            .data{
                height: 110px;
                width: 180px;
                border-radius: 15px;
                background: url(../../assets/imgs/index-card-data.png) center no-repeat;
                background-size: cover;
                .p_com1{
                    color: white;
                    font-size: 16px;
                    padding: 15px;
                    font-weight: bold;
                }
            }
            .badge{
                height: 110px;
                width: 185px;
                border-radius: 15px;
                background: rgba(123, 203, 245, 1); 
                position: relative;
                .p_com1{
                    color: rgba(0, 81, 119, 1);
                    font-size: 16px;
                    padding: 15px;
                    font-weight: bold;
                    position: absolute;
                }
                img{
                    position: absolute;
                    height: 90px;
                    width: 90px;
                    bottom: 0;
                }
                .b_num{
                    font-size: 80px;
                    font-weight: bold;
                    position: absolute;
                    color:rgba(0, 78, 115, 1);
                    right: 35px;
                    top:10px;
                }
                .mei{
                    position: absolute;
                    right: 20px;
                    top:70px;
                    font-weight: bold;
                    color:rgba(0, 78, 115, 1);
                }
            }
        }
        // 课程训练
        .box3{
            height: 110px;
            padding: 0 20px 0 20px;
            margin-top: 20px;
            .project{
                height: 110px;
                background: url(../../assets/imgs/index-swiper-bg2.jpg) top no-repeat;
                background-size: cover;
                border-radius: 15px;
                background-position-y: -20px;
                .p_com1{
                    color: white;
                    font-size: 16px;
                    padding: 15px;
                    font-weight: bold;
                }
            }
            
        }
        // 户外跑步
        .box4{
            height: 110px;
            padding: 0 20px 0 20px;
            margin-top: 20px;
            .run{
                height: 110px;
                background: url(../../assets/imgs/index-card-run.png) top no-repeat;
                background-size: cover;
                border-radius: 15px;
                background-position-y: -60px;
                .p_com1{
                    color: white;
                    font-size: 16px;
                    padding: 15px;
                    font-weight: bold;
                }
            }
            
        }
        
    }
}